---
title: TanStack Query
icon: "ReactQuery"
---

In order to use `@daveyplate/better-auth-ui` with the [`@daveyplate/better-auth-tanstack`](https://github.com/daveyplate/better-auth-tanstack) package, all you need to do is change your [`<AuthUIProvider />`](/components/auth-ui-provider) into an `<AuthUIProviderTanstack />` component. It accepts all of the same props and configuration options.

The main difference is the `persistClient` prop which is only required if you are using a [`persistQueryClient`](https://tanstack.com/query/latest/docs/framework/react/plugins/persistQueryClient) for offline Authentication. This prop will tell the authentication methods to use the `/auth/callback` path for all authentication methods that leave the site, which will clear your query cache for you automatically.

```tsx title="app/providers.tsx"
"use client"

import { AuthUIProviderTanstack } from "@daveyplate/better-auth-ui/tanstack"
import { AuthQueryProvider } from "@daveyplate/better-auth-tanstack"
import Link from "next/link"
import { useRouter } from "next/navigation"

import { authClient } from "@/lib/auth-client"

export function Providers({ children }: { children: React.ReactNode }) {
    const router = useRouter()

    return (
        <AuthQueryProvider>
            <AuthUIProviderTanstack
                authClient={authClient}
                navigate={router.push}
                persistClient={false}
                replace={router.replace}
                onSessionChange={() => router.refresh()}
                Link={Link}
            >
                {children}
            </AuthUIProviderTanstack>
        </AuthQueryProvider>
    )
}
```